<template>
    <div class="checkLine">
        <div class="header">
            <span>趟次车辆替换</span>
            <span style="cursor: pointer;" @click="() => emit('closeWindow')">X</span>
        </div>

        <div class="info">
            {{ props.roueterData.plateNo }}（{{ props.roueterData.vehicleId }}）
            <span>当前部位：{{ 2 }}</span>
        </div>      

        <div class="select">
            <span style="color: red;">*</span>
            <span class="title">请选择要替换的车辆</span>
            <el-select v-model="choiceRoute" placeholder="请选择">
                <el-option v-for="item in dictTagHostRoutes" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
            </el-select>
        </div>

        <div class="btnBox">
            <el-button type="primary" @click="submit">保存</el-button>
        </div>


    </div>
</template>

<script setup >
import { listRoute } from "@/api/basic/route";
import { changeRoute } from '@/api/dispatch/routeLine'
const { proxy } = getCurrentInstance();
const emit = defineEmits(['closeWindow'])
const props = defineProps({
    roueterData: Object,
    routeName: Object
})

const dictTagHostRoutes = ref([])
let query = {
    compoundType: '1',
    pageSize: 9999
}
listRoute(query).then(response => {
    response.rows.forEach(item => {
        dictTagHostRoutes.value.push({
            value: item.id,
            label: item.name,
            elTagType: 'danger',
            deviceRouteCode: item.deviceRouteCode,
        })
    })
})

const choiceRoute = ref()
const submit = () => {
    if (choiceRoute.value == undefined) {
        proxy.$modal.msgError('请选择线路')
        return false
    } else {

        let obj = dictTagHostRoutes.value.filter(item => item.value == choiceRoute.value)
        console.log(obj);

        let newobj = {
            routeId: obj[0].value,
            deviceRouteCode: obj[0].deviceRouteCode,
            vehicleId: props.roueterData.vehicleId
        }

        changeRoute(newobj).then(res => {
            if (res.code == 200) {
                emit('closeWindow')
                proxy.$modal.msgSuccess(res.msg)
            } else {
                proxy.$modal.msgError(res.msg)
            }
        })
    }
}

</script>

<style scoped lang="scss">
.checkLine {
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid #9BAFD6;

        >span {
            font-size: 20px;
            font-weight: 600;
        }
    }

    .info {
        margin-top: 20px;
        >span{
            margin-left: 50px;
        }
    }   

    .select {
        margin:40px 0;
        span.title {
            margin-right: 20px;
        }
    }

    .btnBox {
        margin-top: 40px;
        text-align: center;
    }

}
</style>